<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-CN">

<!-- Mirrored from v3.bootcss.com/examples/dashboard/ by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 25 Nov 2015 09:27:48 GMT -->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="http://v3.bootcss.com/favicon.ico">

    <title>后台管理</title>

    <!-- Bootstrap core CSS -->
    <link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="${pageContext.request.contextPath}/bootstrap/css/dashboard.css" rel="stylesheet">

    <!-- layer弹窗样式 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layer/skin/default/layer.css">

</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="${pageContext.request.contextPath}/">投票系统后台管理页面</a>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li><a href="${pageContext.request.contextPath}/vote/toAddVote.do">增加投票</a></li>
                <li class="active"><a href="${pageContext.request.contextPath}/vote/toShowVote.do">投票管理<span class="sr-only">(current)</span></a></li>
            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <h1 class="page-header">投票管理</h1>
            <table class="table table-striped" id="showVoteTable">
                <tr>
                    <th>投票序号</th>
                    <th>投票名</th>
                    <th>投票选项1</th>
                    <th>投票选项2</th>
                    <th>投票选项3</th>
                    <th>删除</th>
                </tr>

                <%--<tr>
                    <td>1</td>
                    <td>你最喜欢的男明星</td>
                    <td>刘德华</td>
                    <td>郭富城</td>
                    <td>陈奕迅</td>
                    <td><a href="#"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
                </tr>--%>
            </table>
        </div>
    </div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="${pageContext.request.contextPath}/jquery/jquery-2.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/layer/layer.js"></script>
<script type="application/javascript">
    // 定义加载页面数据的函数
    function loadVote(){
        // 弹出加载数据弹窗
        var loadingIndex = layer.msg('加载中',{icon:16});
        // 异步加载所有投票选项
        $.ajax({
            type : "POST",
            url : "${pageContext.request.contextPath}/vote/showVote.do",
            success : function(result){
                var content = '';
                // 关闭加载弹窗
                layer.close(loadingIndex);
                // 判断是否加载成功
                if (result.success){
                    // 成功,弹出成功弹窗
                    layer.msg(result.message,{time:1000,icon:6,shift:5});
                    // 拼接数据
                    $.each(result.data,function (i,n) {
                        content+='<tr>';
                        content+='	<td>'+n.vote.voteID+'</td>';
                        content+='	<td>'+n.vote.voteName+'</td>';
                        for (var i = 0; i < n.voteOptions.length && i < 3; ++i){
                            content+='	<td>'+n.voteOptions[i].voteOptionName+'</td>';
                        }
                        content+='	<td><a href="#" onclick="delVote('+n.vote.voteID+')"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>';
                        content+='</tr>';
                    });
                    // 将拼接好的数据放到table中
                    $("#showVoteTable").append(content);
                } else{
                    // 失败
                    layer.msg(result.message,{time:1000,icon:5,shift:6});
                }
            },
            error : function () {
                // 弹出请求失败弹窗
                layer.msg('请求失败',{time:1000,icon:5,shift:6});
            }
        });
    }

    // 页面加载完成函数
    $(function () {
        // 调用页面加载数据函数
        loadVote();
    });

    // 定义删除函数
    function delVote(voteID){
        // 弹出删除弹框
        layer.confirm('确定要删除当前投票吗?',{icon:3,title:'提示'},function (index) {
            // 确定要删除
            // 关闭弹窗
            layer.close(index);
            // 异步请求删除投票
            $.ajax({
                type : "POST",
                url : "${pageContext.request.contextPath}/vote/delVote.do",
                data : {voteID : voteID},
                success : function (result) {
                    // 判断是否删除成功
                    if (result.success) {
                        // 成功
                        // 弹窗
                        layer.msg(result.message, {time:1000,icon:6,shift:5});
                        // 重新加载页面数据
                        location.href = "${pageContext.request.contextPath}/vote/toShowVote.do";
                    } else {
                        layer.msg(result.message, {time:1000,icon:5,shift:6});
                    }
                },

            error : function () {
                    layer.msg('请求失败', {time:1000,icon:5,shift:6});
                }
            });
        });
    }
</script>
</body>

<!-- Mirrored from v3.bootcss.com/examples/dashboard/ by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 25 Nov 2015 09:27:49 GMT -->
</html>